<template>
  <div class="listCens">
    <div class="panel_timeLine">
      <!-- 事件时间线循环渲染 -->
      <div v-for="(item, index) in eventList" :key="index" class="panel-group">
        <div class="panel-left-box">
          <div class="box-icon-border">
            <div class="box-icon">
              <!-- 根据事件类型匹配Element UI图标 -->
              <i :class="['el-icon', item.icon]"></i>
            </div>
          </div>
          <!-- 最后一个事件的连线为结束样式 -->
          <div
            :class="[
              'box-line',
              index === eventList.length - 1 ? 'end-line' : '',
            ]"
          ></div>
        </div>
        <div class="panel-section">
          <div class="section-title">
            <span class="event-type">{{ item.type }}</span>
            <span class="event-time">{{ item.time }}</span>
          </div>
          <div class="section-content">
            <p class="event-content">{{ item.content }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DevelopDemo",
  data() {
    return {
      // 完整事件列表（与图中信息一致）
      eventList: [
        {
          type: "人员调度",
          time: "2025-01-15 00:00:00",
          content: "调度:付志伟66311966，时间: 2025-01-15 00:00:00",
          icon: "el-icon-user",
        },
        {
          type: "现场处置",
          time: "2025-01-07 17:06:31",
          content: "处置方案新增",
          icon: "el-icon-s-tools",
        },
        {
          type: "人员调度",
          time: "2025-01-07 16:52:07",
          content: "调度:王岩松66331940，时间: 2025-01-07 16:52:07",
          icon: "el-icon-user",
        },
        {
          type: "人员调度",
          time: "2025-01-07 16:51:55",
          content: "调度:陈琳潇13523516325，时间: 2025-01-07 16:51:55",
          icon: "el-icon-user",
        },
        {
          type: "上级批示",
          time: "2025-01-07 16:51:04",
          content: "上级批示",
          icon: "el-icon-document-checked",
        },
        {
          type: "预案启动",
          time: "2025-01-07 16:50:29",
          content:
            "启动-嵩县人民政府突发公共事件总体应急预案-县级-对饮用水源保护区造成或可能造成影响,启动-嵩县人民政府突发公共事件总体应急预案-县级-对饮用水源保护区造成或可能造成影响,启动-嵩县人民政府突发公共事件总体应急预案-县级-对饮用水源保护区造成或可能造成影响",
          icon: "el-icon-flag",
        },
        {
          type: "应急终止报告",
          time: "2025-01-07 16:46:39",
          content:
            "嵩县环境保护局关于对2024年12月11日汤营超标应急处置情况的报告 县人民政府: 2025年01月07日",
          icon: "el-icon-document",
        },
      ],
    };
  },
  created() {
    console.log("DevelopDemo页面已加载");
  },
  methods: {},
};
</script>

<style scoped>
div {
  font-family: SourceHanSansCN-Regular !important;
}

.listCens {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
}

.panel_timeLine {
  position: absolute;
  right: 1px;
  top: 0;
  width: 100%;
  height: 100%;
  color: #000;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.panel-group {
  display: flex;
  margin-bottom: 20px;
}

.panel-left-box {
  width: 40px;
  min-width: 40px;
  height: 100%;
  position: relative;
}

.box-icon-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background-color: rgba(48, 126, 255, 0.3);
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 2;
  overflow: hidden;
}

.box-icon {
  margin: 4px;
  width: 32px;
  height: 32px;
  background: linear-gradient(
    45deg,
    rgba(40, 120, 254, 1),
    rgba(87, 149, 255, 1)
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-icon i {
  font-size: 16px;
  color: white;
  margin: 0;
}

.box-line {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 1px;
  height: 100%;
  background-color: rgba(48, 126, 255, 1);
  z-index: 1;
}

.end-line {
  height: 0px;
}

.panel-section {
  padding-top: 10px;
  flex: 1;
}

.section-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 5px;
  padding-left: 10px;
}

.event-type {
  display: block;
  margin-bottom: 2px;
}

.event-time {
  font-size: 14px;
  font-weight: normal;
  color: #d9de11;
}

.section-content {
  padding-left: 10px;
}

.event-content {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin: 0;
  word-break: break-all;
}
</style>

<style>
/* Element UI下拉选择器样式（如需保留可使用） */
.el-select-dropdown.el-popper {
  border: 1px solid rgba(48, 126, 255, 1) !important;
  background-color: rgba(48, 126, 255, 0.8) !important;
}

.el-select-dropdown__item {
  color: white !important;
}

.el-select-dropdown__item.selected {
  color: white !important;
  border-color: rgba(48, 126, 255, 1) !important;
  background-color: rgba(48, 126, 255, 1) !important;
}

.el-select-dropdown__item:hover {
  color: white !important;
  border-color: rgba(48, 126, 255, 1) !important;
  background-color: rgba(48, 126, 255, 0.5) !important;
}

.el-select-dropdown__item.selected:hover {
  color: white !important;
  border-color: rgba(48, 126, 255, 1) !important;
  background-color: rgba(48, 126, 255, 1) !important;
}

.el-popper[x-placement^="bottom"] .popper__arrow::after {
  top: 0px;
  border-bottom-color: rgba(48, 126, 255, 1) !important;
}
</style>
